<template>
    <div class="se-container">
        <div class="se-header">业绩排行榜</div>
        <div class="se-body">
            <div
                class="filter-header"
                ref="filter"
                v-if="selectionList.length === 0"
            >
                <div class="filter-box">
                    <time-type-select @change="timeTypeChange"></time-type-select>
                    <el-select
                        v-model="strucSelectValue"
                        @change="selectedChange"
                        placeholder="部门"
                    >
                        <el-option
                            v-for="(item, index) in strucSelect"
                            :key="index"
                            :label="item.name"
                            :value="index"
                        >
                        </el-option>
                    </el-select>
                    <el-select
                        v-model="cateSelectValue"
                        @change="selectedChange"
                        placeholder="业务类型"
                    >
                        <el-option
                            v-for="(item, index) in cateSelect"
                            :key="index"
                            :label="item.name"
                            :value="index"
                        >
                        </el-option>
                    </el-select>
                    <!-- <el-button
                        type="primary"
                        @click="searchClick"
                    >筛选</el-button> -->
                    <!-- <el-button
                        class="fr"
                        @click="exportClick"
                        type="primary"
                    >excel导出</el-button> -->
                </div>
            </div>
            <flexbox
                v-if="selectionList.length > 0"
                class="selection-bar"
            >
                <div class="selected—title">已选中<span class="selected—count">{{selectionList.length}}</span>项</div>
                <flexbox class="selection-items-box">
                    <flexbox
                        class="selection-item"
                        v-for="(item, index) in selectionInfo"
                        :key="index"
                        @click.native="selectionBarClick(item.type)"
                    >
                        <img
                            class="selection-item-icon"
                            :src="item.icon"
                        />
                        <div class="selection-item-name">{{item.name}}</div>
                    </flexbox>
                </flexbox>
            </flexbox>
            <el-table
                class="main-table"
                id="examine-table"
                v-loading="loading"
                :data="tableData"
                :height="tableHeight"
                highlight-current-row
                style="width: 100%"
                @selection-change="handleSelectionChange"
                @row-click="handleRowClick"
            >
                <!-- <el-table-column
                    v-if="tableUpdateAuth"
                    type="selection"
                    width="55"
                ></el-table-column> -->
                <el-table-column
                    show-overflow-tooltip
                    v-for="(item, index) in fieldList"
                    :key="index"
                    :prop="item.prop"
                    :width="item.width"
                    :label="item.label"
                    :align="item.align"
                >
                    <template
                        slot="header"
                        slot-scope="scope"
                    >
                        <div class="table-head-name">{{scope.column.label}}</div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="p-contianer">
                <!-- <div class="total-count">业绩合计(￥)：{{achievemenTotal}}</div> -->
                <!-- <el-pagination
                    class="p-bar"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size.sync="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination> -->
            </div>
        </div>
    </div>
</template>

<script>
import {
    getStrucAndCateAPI,
    recordRankingAPI
} from "@/api/customermanagement/achievement";
import {
    adminStructuresSubIndex
} from "@/api/common";
import { mapGetters } from "vuex";
import { timestampToFormatTime } from "@/utils";
import timeTypeSelect from '@/components/timeTypeSelect'

export default {
    /** 系统管理 的 审核管理 */
    name: "system-examine",
    components: {
        timeTypeSelect
    },
    mixins: [],
    data() {
        return {
            loading: false, // 加载动画
            tableHeight: document.documentElement.clientHeight - 270, // 表的高度
            // 筛选
            timeTypeValue: {},
            strucSelect: [],
            cateSelect: [],
            cateSelectValue: 0,
            strucSelectValue: 0,
            // 表格
            selectionList: [], // 批量勾选数据
            tableData: [],
            fieldList: [
                {
                    prop: "index",
                    label: "公司总排名",
                },
                {
                    prop: "user_name",
                    label: "业务员",
                },
                {
                    prop: "structure_name",
                    label: "部门",
                },
                {
                    prop: "money",
                    label: "成交金额(￥)",
                },
            ],
            currentPage: 1,
            pageSize: 10,
            pageSizes: [10, 20, 30, 40],
            total: 0,
            achievemenTotal: "",
            isFirst: true,
        };
    },
    computed: {
        ...mapGetters(["admin"]),
        // 员工创建权限
        userSaveAuth() {
            return this.admin && this.admin.users && this.admin.users.save;
        },
        // 员工编辑操作权限
        userUpdateAuth() {
            return this.admin && this.admin.users && this.admin.users.update;
        },
        // 员工禁用启用权限
        userEnablesAuth() {
            return this.admin && this.admin.users && this.admin.users.enables;
        },
        // 员工列表的勾选编辑
        tableUpdateAuth() {
            return this.userEnablesAuth && this.userUpdateAuth;
        },
        selectionInfo: function() {
            let temps = [];
            if (this.userEnablesAuth) {
                temps = [
                    {
                        name: "工资单确认",
                        type: "confirm",
                        icon: require("@/assets/img/selection_start.png")
                    }
                ];
            }
            return temps;
        },
    },
    mounted() {
        var self = this;
        /** 控制table的高度 */
        window.onresize = function() {
            self.tableHeight = document.documentElement.clientHeight - 270;
        };
        this.getCateList();
        this.getStrucList();
    },
    watch: {
        cateSelect: {
            handler(newValue, oldValue) {
                if (this.cateSelect.length>0&&this.strucSelect.length>0) {
                    this.getList()
                }
            },
            deep: true
        },
        strucSelect: {
    　　　　handler(newValue, oldValue) {
                if (this.cateSelect.length>0&&this.strucSelect.length>0) {
                    this.getList()
                }
            },
            deep: true
    　　},
    },
    methods: {
        // 时间类型选择
        timeTypeChange(data) {
            this.timeTypeValue = data
            !this.isFirst&&this.searchClick()
        },
        /** 获取类型 */
        getCateList() {
            let params = {};
            getStrucAndCateAPI(params)
                .then(res => {
                    let objCate = {
                        category_id: 0,
                        name: "全部",
                        pid: 0,
                        remark: "全部",
                    }
                    this.cateSelect = [objCate, ...res.data.cate]
                })
                .catch(() => {});
        },
        /** 获取部门 */
        getStrucList() {
            let params = {};
            adminStructuresSubIndex({
                m: 'crm',
                c: 'contract',
                a: 'read'
            })
                .then(res => {
                    let objStruc = {
                        id: 0,
                        name: "全部"
                    }
                    this.strucSelect = [objStruc, ...res.data]
                })
                .catch(() => {});
        },
        /** 部门选择回调 */
        selectedChange () {
            this.currentPage = 1;
            this.getList();
        },
        /** 获取列表 */
        getList() {
            this.isFirst = false
            this.loading = true;
            let params = {}
            if (this.strucSelect&&this.cateSelect) {
                params.structure_id = this.strucSelect[this.strucSelectValue].id,
                params.product_category_id = this.cateSelect[this.cateSelectValue].category_id
            }
            if (this.timeTypeValue.type) {
                if (this.timeTypeValue.type == 'default') {
                    params.type = this.timeTypeValue.value
                } else {
                    params.start_time = timestampToFormatTime(this.timeTypeValue.startTime, 'YYYY-MM-DD')
                    params.end_time = timestampToFormatTime(this.timeTypeValue.endTime, 'YYYY-MM-DD')
                }
            }
            recordRankingAPI(params)
                .then(res => {
                    this.tableData = res.data.map((item, index) => {
                        item.index = index + 1
                        return item
                    });
                    this.total = res.data.dataCount;
                    this.achievemenTotal = res.data.totalCount.money
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        /** 筛选 */
        searchClick() {
            this.currentPage = 1;
            this.getList();
        },
        /** 列表操作 */
        // 当某一行被点击时会触发该事件
        handleRowClick(row, column, event) {
            if (column.property) {
                // this.detailData = row;
                // this.showDetail = true;
            }
        },
        // 更改每页展示数量
        handleSizeChange(val) {
            this.pageSize = val;
            this.getList();
        },
        // 更改当前页数
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getList();
        },
        // 勾选
        handleSelectionChange(val) {
            this.selectionList = val; // 勾选的行
        },
        // 操作
        handleClick(type, scope) {
            
        },
        // excel导出
        exportClick () {
            let params = {};
            params.keyword = this.params.keyword
            params.month = this.params.month
            params.structure = this.params.structure
            var url = `http://jingu.3todo.com/index.php/oa/salary/financeExportSalary?structure=${this.params.structure}&month=${this.params.month}&keyword${this.params.keyword}`
            window.open(url)
        },
    }
};
</script>

<style lang="scss" scoped>
.se-header {
    height: 60px;
    position: relative;
    z-index: 100;
    padding: 0 20px;
    font-size: 18px;
    line-height: 60px;
}

.se-body {
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
}

.se-table-header {
    height: 50px;
    background-color: white;
    position: relative;
    .se-table-header-button {
        float: right;
        margin-right: 20px;
        margin-top: 10px;
    }
}

.p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
        float: right;
        margin: 5px 100px 0 0;
        font-size: 14px !important;
    }
}

/* 搜索框图标按钮 */
.icon-search .el-icon-search {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    color: #ccc;
}
/* 设置flex布局 */
.flex-index {
    display: flex;
    flex-direction: column;
}
/* 设置占位 */
.flex-box {
    flex: 1;
    border-bottom: 1px solid #e6e6e6;
}
/* 搜索框 */
.icon-search {
    width: 280px;
    position: relative;
    float: left;
    margin: 0 4px 0 0;
}

/** 勾选操作 */
.selection-bar {
    font-size: 12px;
    height: 54px;
    min-height: 54px;
    padding: 0 20px;
    color: #777;

    .selected—title {
        flex-shrink: 0;
        padding-right: 20px;
        border-right: 1px solid $--table-border-color;
        .selected—count {
            color: $xr-color-primary;
        }
    }
}
.selection-items-box {
    .selection-item {
        width: auto;
        padding: 15px;
        .selection-item-icon {
            display: block;
            margin-right: 5px;
            width: 15px;
            height: 15px;
        }
        .selection-item-name {
            cursor: pointer;
            color: #777;
        }
        .selection-item-name:hover {
            color: $xr-color-primary;
        }
    }
}

.position-tag{
    margin-left: 82px;
}
.position-tag span{
    margin: 0 5px 5px 0;
}
.el-date-editor /deep/ .el-range-separator{
    width: 30px;
    line-height: 28px;
}
.el-range-editor.el-input__inner{
    float: left;
    margin-right: 10px;
    // height: 32px;
}
.el-date-editor /deep/ .el-range__icon{
    line-height: 28px;
}
.el-date-editor /deep/ .el-range__close-icon{
    line-height: 28px;
}
.total-count{
    font-size: 14px;
    line-height: 32px;
    float: left;
    margin-top: 5px;
    margin-left: 20px;
    font-weight: 600;
}
@import "@/styles/table.scss";
</style>
